<template>
  <div class="dock-container">
    <div class="dock" ref="dock">
      <div 
        v-for="(item,index) in itemList" :key="index" class="dock-item"
        :style="{
          'background': item.color,
          'transform': `scale(${item.scale})`,
          'margin': `0 ${item.margin}px`
        }"
        @mouseenter="onMouseEnter(index)"
        @mouseleave="onMouseLeave(index)"
        @click="onItemClick(item)"
      >
      
        <!-- <img :src="item.icon" :alt="item.name" class="dock-icon"> -->
        <!-- <span class="tooltip">{{ item.name }}</span> -->
        <!-- <router-link :to="item.path">{{ item.name }}</router-link> -->
        <router-link :to="item.path">
          <el-icon v-if="item.type === 'element-icon'" class="dock-icon">
            <component :is="item.icon" />
          </el-icon>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getMenuList } from '@/api';

export default {
  name: 'NavbarDock',
  data() {
    return {
      itemList: null,
      dockWidth: 0
    }
  },
  async created() {
    this.getMenuList()
  },
  mounted() {
    // this.calculateDockWidth();
    window.addEventListener('resize', this.calculateDockWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateDockWidth);
  },
  methods: {
    async getMenuList(){
      const resp = await getMenuList()
      this.itemList = resp.data
    },
    calculateDockWidth() {
      if (this.$refs.dock) {
        this.dockWidth = this.$refs.dock.offsetWidth;
      }
    },
    onMouseEnter(index) {
      // 放大当前项
      this.itemList[index].scale = 2;
      this.itemList[index].margin = 10;
      
      // 对邻近项也做一定放大
      if (index > 0) {
        this.itemList[index - 1].scale = 1.6;
        this.itemList[index - 1].margin = 8;
      }
      if (index < this.itemList.length - 1) {
        this.itemList[index + 1].scale = 1.6;
        this.itemList[index + 1].margin = 8;
      }
    },
    onMouseLeave(index) {
      
      // 恢复所有项
      this.itemList.forEach(item => {
        item.scale = 1.2;
        item.margin = 5;
      });
    },
    onItemClick(item) {
      this.$emit('item-click', item);
      // 添加点击动画
      // const clickedIndex = this.itemList.findIndex(i => i.name === item.name);
      // if (clickedIndex !== -1) {
      //   // this.itemList[clickedIndex].scale = 0.8;
      //   // setTimeout(() => {
      //   //   this.itemList[clickedIndex].scale = 1.2;
      //   // }, 200);
      // }
    }
  }
}
</script>

<style scoped>
.dock-container {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1000;
}

.dock {
  display: flex;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 10px 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.dock-item {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.dock-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: transform 0.2s;
}

.tooltip {
  position: absolute;
  top: -35px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.dock-item:hover .tooltip {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dock {
    padding: 8px 10px;
  }
  .dock-item {
    width: 40px;
    height: 40px;
  }
  .dock-icon {
    width: 24px;
    height: 24px;
  }
}
</style>